<template>
  <div v-if="data" class="container">
    <!-- 左 -->
    <div class="left">
      <div class="box1">
        <!-- 横向柱状图 -->
        <HorizontalBar :data="data.regionData"></HorizontalBar>
      </div>
      <div class="box2">
        <!-- 雷达图 -->
        <RadarBar :data="data.riskData"></RadarBar>
      </div>
      <div class="box3">
        <!-- 数据传递关系图 -->
        <RelationItem :data="data.relationData"></RelationItem>
      </div>
    </div>
    <!-- 中 -->
    <div class="center">
      <div class="box4">
        <!-- 数据总览图 -->
        <TotalData :data="data.totalData"></TotalData>
      </div>
      <div class="box5">
        <!-- 地图可视化 -->
        <MapChart class="bg-opacity-5 bg-blue-500 p-3 mt-2 flex-1" :data="data.mapData"></MapChart>
      </div>
    </div>
    <!-- 右 -->
    <div class="right">
      <div class="box6">
        <!-- 竖向柱状图 -->
        <VerticalBar :data="data.serverData"></VerticalBar>
      </div>
      <div class="box7">
        <!-- 环形图 -->
        <RingBar :data="data.abnormalData"></RingBar>
      </div>
      <div class="box8">
        <!-- 数据云图 -->
        <WordCloud :data="data.wordCloudData"></WordCloud>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getVisualization } from '@/api/visualization'
import HorizontalBar from '@/components/main/HorizontalBar.vue'
import MapChart from '@/components/main/MapChart.vue'
import RadarBar from '@/components/main/RadarBar.vue'
import RelationItem from '@/components/main/RelationItem.vue'
import RingBar from '@/components/main/RingBar.vue'
import TotalData from '@/components/main/TotalData.vue'
import VerticalBar from '@/components/main/VerticalBar.vue'
import WordCloud from '@/components/main/WordCloud.vue'
import { ref } from 'vue'

const data = ref(null)

const loadData = async () => {
  data.value = await getVisualization()
  // console.log(data.value)
}

loadData()

setInterval(() => {
  loadData()
}, 3000)

</script>

<style lang="less" scoped>
.container {
  color: white;
  padding: .125rem;
  display: flex;
  overflow: hidden;
  // height: 13.25rem;
  // min-height: 100%;
  height: calc(100vh - 1.125rem);
  // background-color: pink;

  margin-top: .125rem;

  .left {
    flex: 1;
    margin-right: .125rem;

    // padding: .15rem;
    display: flex;
    flex-direction: column;

    .box1 {
      flex: 1;
      margin-bottom: .125rem;
      background-color: rgba(37, 99, 235, 0.2);
    }

    .box2 {
      flex: 1;
      margin-bottom: .125rem;
      background-color: rgba(37, 99, 235, 0.2);
    }

    .box3 {
      flex: 1;
      background-color: rgba(37, 99, 235, 0.2);
    }
  }

  .center {
    flex: 2;
    display: flex;
    flex-direction: column;
    // padding: .15rem;
    margin-right: .125rem;


    .box4 {
      background-color: rgba(37, 99, 235, 0.2);
      margin-bottom: .125rem;
      flex: 1;
    }

    .bo5 {
      flex: 2.8;
      background-color: rgba(37, 99, 235, 0.2);
    }
  }

  .right {
    flex: 1;
    // padding: .15rem;
    display: flex;
    flex-direction: column;

    .box6 {
      flex: 1;
      margin-bottom: .125rem;
      background-color: rgba(37, 99, 235, 0.2);
    }

    .box7 {
      flex: 1;
      margin-bottom: .125rem;
      background-color: rgba(37, 99, 235, 0.2);
    }

    .box8 {
      flex: 1;
      background-color: rgba(37, 99, 235, 0.2);
    }
  }
}
</style>